<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报名通道-注册详细信息</title>
    <link href="../layui/css/layui.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
</head>
<body>
<div class="container">
    <div class="topbar"></div>
    <div class="banner"></div>
    <div class="navbar">
        <ul>
            <li class="active"><a href="../index.html">首页</a></li>
            <li><a href="activity.html">活动中心</a></li>
            <li><a href="new.html">新闻中心</a></li>
            <li><a href="voluntTrain.html">志愿者培训</a></li>
            <li><a href="controll.html">交管员社区</a></li>
            <li><a href="forum.html">论坛</a></li>
            <li><a href="personal.html">个人中心</a></li>
        </ul>
    </div>
    <div class="contents apply applyZcXq">
        <div class="blockSty">
            <div class="applyTitle">
                <div class="zcTitle">志愿者注册——详细信息</div>
            </div>
            <div class="zcContent">
                <form class="layui-form" action="">
                    <div class="formLeft">
                        <div class="layui-form-item">
                            <label class="layui-form-label widthSty">真实姓名:<br>(和身份证一致)</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别:</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="男" title="男" checked>
                                <input type="radio" name="sex" value="女" title="女">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label widthSty">出生日期:<br>(和身份证一致)</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" id="date" placeholder="yyyy-MM-dd" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">籍贯:</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入籍贯" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">政治面貌:</label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required">
                                    <option value=""></option>
                                    <option value="0">群众</option>
                                    <option value="1">团员</option>
                                    <option value="2">党员</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">固定电话:</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入您的固定电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">移动电话:</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入您的移动电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">现住址:</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入您的现住址" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">工作单位:</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入你的工作单位" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">职业:</label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required">
                                    <option value=""></option>
                                    <option value="0">司机</option>
                                    <option value="1">会计/金融</option>
                                    <option value="2">工程师</option>
                                    <option value="3">顾问</option>
                                    <option value="4">计算机相关行业</option>
                                    <option value="5">家庭主妇</option>
                                    <option value="6">教育/培训</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">文化程度:</label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required">
                                    <option value=""></option>
                                    <option value="0">小学</option>
                                    <option value="1">初中</option>
                                    <option value="2">高中</option>
                                    <option value="3">大专</option>
                                    <option value="4">本科</option>
                                    <option value="5">硕士</option>
                                    <option value="6">博士</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">工作学习经历:</label>
                            <div class="layui-input-block">
                                <textarea name="desc" placeholder="请输入您的工作学习经历" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">爱好及特长:</label>
                            <div class="layui-input-block">
                                <textarea name="desc" placeholder="请输入您的爱好及特长" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="formRight">
                        <a href="javascript:;">
                            <div class="tpImg">
                                <img src="../img/upImg.png" class="upImg">
                            </div>
                            <div style="margin-top: 5px;">上传图片</div>
                        </a>
                    </div>
                    <div style="clear: both;"></div>
                </form>
            </div>
        </div>
        <div class="nextBtn">
            <button class="layui-btn">下一步</button>
        </div>
    </div>
    <div class="footer">
        <div class="links">
            <ul>
                <li><a href="/">中国组织网</a></li>
                <li><a href="/">中国共青团网</a></li>
                <li><a href="/">中国文明网</a></li>
                <li><a href="/">中国青年志愿者网</a></li>
                <li><a href="/">山东省共青团</a></li>
                <li><a href="/">齐鲁网</a></li>
                <li><a href="/">日照文明网</a></li>
                <li><a href="/">日照共青团</a></li>
                <li><a href="/">日照政务网</a></li>
                <li><a href="/">日照警务网</a></li>
            </ul>
        </div>
        <p class="company">主办：日照市交通局 | 协办：日照市志愿者协会</p>
        <p class="copyright">版权所有：日照市交通志愿者协会 技术支持：山东书壳儿网络科技有限公司</p>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script>
    layui.use(['form','layer'], function(){
        var form = layui.form
            ,layer = layui.layer;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        // 报名成功
        $(".nextBtn").click(function () {
            layer.msg('报名成功，等待审核', {
                time: 2000
            });
        })
    });
</script>
</html>